<template>
  <div class="call-page">
    <div class="info-box">
      <p class="call-type">{{countryName}}</p>
      <p class="telephone">{{telephone}}</p>
      <p class="call-time" v-if="status">{{time}}</p>
      <p class="call-status" v-if="!status && dialStatus ==='dial'">正在拨号...</p>
      <p class="call-status" v-if="!status && dialStatus ==='answer'">来电...</p>
    </div>
    <mu-button fab color="success" @click="answer" v-if="!status && dialStatus ==='answer'">
      <mu-icon value=":iconfont icon-huru" size="34"></mu-icon>
    </mu-button>
    <mu-button :class="{marginLeft: !status && dialStatus ==='answer'}" fab color="error" v-if="dialStatus ==='answer'" @click="reject">
      <mu-icon value=":iconfont icon-iconfontdianhua1" size="34"></mu-icon>
    </mu-button>
    <mu-button fab color="error" @click="hangUp" v-if="dialStatus ==='dial'">
      <mu-icon value=":iconfont icon-iconfontdianhua1" size="34"></mu-icon>
    </mu-button>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'CallTel',
  data () {
    return {
      status: false,
      time: '00:00:00',
      startTime: 0,
      setInterval: null
    };
  },
  computed: {
    ...mapGetters([
      'isCall',
      'telephone',
      'countryName',
      'dialStatus'
    ])
  },
  created () {
    var _this = this;
    _this.$nexmoApplication.on('call:status:changed', (call) => {
      console.log(call.status);
      // 失败的所有状态直接挂断电话
      var callStatus = ['completed', 'failed', 'timeout', 'unanswered', 'rejected', 'busy'].some(item => item === call.status);
      if (callStatus) {
        _this.hangUp();
      } else if (call.status === 'answered') {
        _this.status = true;
        _this.startTime = Date.now();
        _this.calTime();
      }
    });
  },
  methods: {
    // 挂断电话
    hangUp() {
      this.clearDada();
      this.$nexmoCall.hangUp();
    },
    // 接听
    answer() {
      this.$nexmoCall.answer();
    },
    // 拒绝
    reject() {
      this.clearDada();
      this.$nexmoCall.reject();
    },
    clearDada() {
      this.$store.dispatch('toggleCallFlase');
      this.time = '00:00:00';
      this.$store.dispatch('setDialStatus', '');
      this.$store.dispatch('setTelephone', '');
      var userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
      this.$getClient();
      this.$store.dispatch('getRecordsList', this.$route.query.msisdn || userInfo.msisdn);
    },
    cTime (st, et) {
      et = et || Date.now();
      const secondexp = 1000;
      const minuteexp = secondexp * 60;
      const hourexp = minuteexp * 60;
      let calcTime = et - st;
      let hour = Math.trunc(calcTime / hourexp);
      calcTime = calcTime % hourexp;
      let minute = Math.trunc(calcTime / minuteexp);
      calcTime = calcTime % minuteexp;
      let second = Math.trunc(calcTime / secondexp);
      calcTime = calcTime % secondexp;
      hour = `${hour}`.replace(/^(\d)$/, '0$1');
      minute = `${minute}`.replace(/^(\d)$/, '0$1');
      second = `${second}`.replace(/^(\d)$/, '0$1');
      return `${hour}:${minute}:${second}`;
    },
    calTime () {
      this.setInterval = setInterval(() => {
        this.time = this.cTime(this.startTime);
      }, 1000);
    }
  }
};
</script>
<style lang="less" scoped>
  .marginLeft{
    margin-left:40px;
  }
  .call-page{
    background: #333;
    color: #fff;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
    text-align: center;
    .info-box{
      height: 70%;
      margin-bottom: 10%;
      line-height: 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .call-type{
        font-size: 24px;
      }
      .call-status{
        font-size: 16px;
      }
    }
  }
</style>
<style lang="less">
  .call-page{

  }
</style>
